<template>
	<div class="page">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 30px;">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商户管理</el-breadcrumb-item>
			<el-breadcrumb-item>商户列表(超级管理)</el-breadcrumb-item>
			<el-breadcrumb-item>银盛进件</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="top-nav">
			<div class="mch-id">
				商户号 ： {{mch_id}}
			</div>
		</div>

		<el-tabs v-model="activeName" style="margin-left: 20px;">
			<el-tab-pane label="商户进件" name="merchant">
				<!-- 商户基本信息 -->
				<el-form ref="form" :model="form" label-width="120px">
					<div class="from-title"><span>商户基本信息</span></div>
					<el-row>
						<el-col :span="24">
							<el-form-item label="商户模式:">
								<el-radio v-model="form.userType" label="0">个体商户</el-radio>
								<el-radio v-model="form.userType" label="1">企业商户</el-radio>
								<el-radio v-model="form.userType" label="3">小微商户（无营业执照）</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="商户简称:">
								<el-input v-model="form.userShortName" placeholder="商户模式为小微商户时，不需要传此参数"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="证件类型:">
								<!-- <el-input v-model="form.certType"></el-input> -->
								<el-select v-model="form.certType" placeholder="证件类型">
									<el-option label="身份证" value="00"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="实际控制人姓名:">
								<el-input v-model="form.actualManager"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="MCC码:">
								<el-input v-model="form.mccCd"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-if="form.merType != 'MERCHANT_01'">
						<el-col :span="6">
							<el-form-item label="联系人电话:">
								<el-input v-model="form.contactsPhone"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系人邮箱:">
								<el-input v-model="form.contactsEmail"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系人姓名:">
								<el-input v-model="form.contactsName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系人通讯地址:">
								<el-input v-model="form.contactsAddr"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="from-title"><span>法人信息</span></div>
					<el-row>
						<el-col :span="6">
							<el-form-item label="法人姓名:">
								<el-input v-model="form.legalPersonName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="法人身份证号:">
								<el-input v-model="form.legalPersonId"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="身份证开始日期:">
								<el-input v-model="form.legalPersonIdSdate" placeholder='格式20200101'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="身份证到期日期:">
								<el-input v-model="form.legalPersonIdEdate" placeholder='永久则为29991231'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="法人电话:">
								<el-input v-model="form.legalPersonPhone"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="法人职业:">
								<el-select v-model="form.crpProfession" placeholder="法人职业">
									<el-option label="机关团体企事业单位" value="1"></el-option>
									<el-option label="公共事业" value="2"></el-option>
									<el-option label="农牧业" value="3"></el-option>
									<el-option label="交通运输业" value="4"></el-option>
									<el-option label="餐旅业" value="5"></el-option>
									<el-option label="建筑工程业" value="6"></el-option>
									<el-option label="制造业" value="7"></el-option>
									<el-option label="医疗保健业" value="8"></el-option>
									<el-option label="娱乐业" value="9"></el-option>
									<el-option label="其他" value="10"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="法人性别:">
								<el-select v-model="form.crpGender" placeholder="法人性别">
									<el-option label="男" value="0"></el-option>
									<el-option label="女" value="1"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="法人地址:">
								<el-input v-model="form.crpAddr"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="from-title"><span>营业资质信息 <span style="color: red;">注：商户模式为小微商户时，此处可为空</span></span>
					</div>
					<el-row>
						<el-col :span="4">
							<el-form-item label="营业执照全称:">
								<el-input v-model="form.businessLicence"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="营业执照号码:">
								<el-input v-model="form.businessLicenceNo"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="执照开始日期:">
								<el-input v-model="form.businessLicenceSdate"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="执照结束日期:">
								<el-input v-model="form.businessLicenceEdate"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="注册地址:">
								<el-input v-model="form.registeredAddress"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="from-title"><span>结算信息<span style="color: red;">注：银行【附录2】 地区【附录6】</span></span></div>
					<el-row>
						<el-col :span="6">
							<el-form-item label="结算卡类型:">
								<el-select v-model="form.balanceAccType" placeholder="结算卡类型">
									<el-option label="对私借记卡" value="11"></el-option>
									<el-option label="对公借记卡" value="21"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="结算账户卡号:">
								<el-input v-model="form.balanceAccCardno"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="结算账户户名:">
								<el-input v-model="form.balanceAccName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="银行预留手机号:">
								<el-input v-model="form.bankMobile"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="开户行行别编号:">
								<el-input v-model="form.bankType"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="开户行行别名称:">
								<el-input v-model="form.bankName" placeholder='示例：中国银行 详见附录2'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="开户支行编号:">
								<el-input v-model="form.openAccBanktype" placeholder='例：10410005145'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="开户支行名称:">
								<el-input v-model="form.openAccBankname" placeholder='例：中国银行股份有限公司北京复兴门支行'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="开户行省:">
								<el-input v-model="form.openAccProvince" placeholder='示例：广东省'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="开户行市:">
								<el-input v-model="form.openAccCity" placeholder='示例：深圳市 '></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="开户行区:">
								<el-input v-model="form.openAccArea" placeholder='示例：6412 详见附录6'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="结算起始金额:">
								<el-input v-model="form.lowestStlAmt" placeholder='必须为正整数(单位:元)'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="是否法人结算:">
								<el-select v-model="form.codeLegalPersonAcc" placeholder="是否法人结算">
									<el-option label="非法人结算" value="0"></el-option>
									<el-option label="法人结算" value="1"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="非法人姓名:">
								<el-input v-model="form.unincorporatedName" placeholder="注：法人结算则传法人姓名"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="非法人身份证号:">
								<el-input v-model="form.unincorporatedId" placeholder='注：法人结算则传法人身份证号码'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="from-title"><span>门店信息</span></div>
					<el-row>
						<el-col :span="6">
							<el-form-item label="营业地址:">
								<el-input v-model="form.businessAddress"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商户归属省:">
								<el-input v-model="form.mercProv" placeholder="如:浙江省"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商户归属市:">
								<el-input v-model="form.mercCity" placeholder="如:杭州市"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商户归属区:">
								<el-input v-model="form.mercArea" placeholder="如:西湖区"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="from-title"><span>支付业务信息</span></div>
					<el-row>
						<el-col :span="4">
							<el-form-item label="POS扫码业务:">
								<el-radio v-model="form.openScan" label="0">不开通</el-radio>
								<el-radio v-model="form.openScan" label="1">开通</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="参与营销:">
								<el-radio v-model="form.marketShow" label="Y">参与</el-radio>
								<el-radio v-model="form.marketShow" label="N">不参与</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="刷卡业务:">
								<el-radio v-model="form.openPosp" label="0">不开通</el-radio>
								<el-radio v-model="form.openPosp" label="1">开通</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="刷卡到账:">
								<el-radio v-model="form.openBusRadio" label="00">T+1</el-radio>
								<el-radio v-model="form.openBusRadio" label="01">D+1</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="刷卡D0:">
								<el-radio v-model="form.fastPay" label="0">不开通</el-radio>
								<el-radio v-model="form.fastPay" label="1">开通</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="扫码D0:">
								<el-radio v-model="form.codeAdvanceOpen" label="0">不开通</el-radio>
								<el-radio v-model="form.codeAdvanceOpen" label="1">开通</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="D0费率:">
								<el-input v-model="form.codeAdvanceRate" placeholder='0.01%，填0.01'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="封底费率:">
								<el-input v-model="form.codeAdvanceMin" placeholder='封底0.01元，填写1'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="备注:">
								<el-input v-model="form.remark" placeholder='备注必填 不能为空'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item class="butt">
						<el-button type="primary" @click="onSubmit">提交</el-button>
					</el-form-item>
				</el-form>

			</el-tab-pane>
			<el-tab-pane label="图片上传" name="upImg">
				<UpImg :id="newId"></UpImg>
			</el-tab-pane>
			<el-tab-pane label="审核" name="third">
				<div class="info-box">
					<div class="orderInfo">
						<div style="margin-top: 40px;">合作方系统流水号：{{intoNo}}</div>
						<div>商户签约地址：{{signUrl}}</div>
						<div>
							<el-button type="primary" @click="autoAuditTerm">商户初审</el-button>
							<el-button type="primary" @click="queryMerchant">商户查询</el-button>
							<el-button type="primary" @click="sendScanSmsCode">重发签约短信</el-button>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="费率设置" name="fourth">
				<onlineTrading :id="newId"></onlineTrading>
			</el-tab-pane>
			<el-tab-pane label="微实名认证开户意愿申请" name="authenticate">
				<authenticate :id="newId" :mch_id="mch_id"></authenticate>
			</el-tab-pane>
			<el-tab-pane label="查询微信实名认证申请单状态" name="queryAuthenticate">
				<div class="info-box">
					<div class="orderInfo">
						<div style="margin-top: 40px;">
							  <img :src=qrcodeData style="display: block; width: 300px;height: 300px;">
						</div>

						<div>
							<el-button type="primary" @click="queryAuthenticate">实名认证码查询</el-button>
							<el-button type="primary" @click="authorized">认证授权状态查询</el-button>
						</div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import UpImg from "./epay-other/up-img";
	import onlineTrading from "./epay-other/onlineTrading";
	import authenticate from "./epay-other/authenticate";
	export default {
		components: {
			UpImg,
			onlineTrading,
			authenticate,
		},
		data() {
			return {
				newId: 0,
				//activeName: 'merchant',
				activeName: 'authenticate',
				mch_id: '',
				intoNo: '',
				signUrl: '', //商户签约地址
				qrcodeData:"", //签约二维码地址
				userid: this.$route.query.id ? this.$route.query.id : 0,
				form: {
					"userType": "",
					"userShortName": null,
					"certType": "",
					"actualManager": "",
					"mccCd": "",
					"contactsPhone": "",
					"contactsEmail": "",
					"contactsName": "",
					"contactsAddr": "",
					"legalPersonName": "",
					"legalPersonId": "",
					"legalPersonIdSdate": "",
					"legalPersonIdEdate": "",
					"legalPersonPhone": "",
					"crpProfession": "",
					"crpGender": "",
					"crpAddr": "",
					"businessLicence": null,
					"businessLicenceNo": null,
					"businessLicenceSdate": null,
					"businessLicenceEdate": null,
					"registeredAddress": null,
					"balanceAccType": "",
					"balanceAccCardno": "",
					"balanceAccName": "",
					"bankMobile": "",
					"bankType": "",
					"bankName": "",
					"openAccBanktype": "",
					"openAccBankname": "",
					"openAccProvince": "",
					"openAccCity": "",
					"openAccArea": "",
					"lowestStlAmt": "",
					"codeLegalPersonAcc": "",
					"unincorporatedName": "",
					"unincorporatedId": "",
					"mercLvl": "",
					"businessAddress": "",
					"mercProv": "",
					"mercCity": "",
					"mercArea": "",
					"openScan": "",
					"marketShow": "",
					"openPosp": "",
					"openBusRadio": "",
					"fastPay": "",
					"codeAdvanceOpen": "",
					"wechatSignRate": null,
					"wechatSignMin": null,
					"alipaySignRate": null,
					"alipaySignMin": null,
					"creditRate1": null,
					"creditMin1": null,
					"debitRate1": null,
					"debitMin1": null,
					"debitMax1": null,
					"creditRate2": null,
					"creditMin2": null,
					"debitRate2": null,
					"debitMin2": null,
					"debitMax2": null,
					"t111Rate": null,
					"t111RateTop": null,
					"t111SignRateMin": null,
					"t112Rate": null,
					"t112SignRateMin": null,
					"t11Rate": null,
					"t11RateTop": null,
					"t11SignRateMin": null,
					"t12Rate": null,
					"t12SignRateMin": null,
					"tAdvanceType": null,
					"tAdvanceFee": null,
					"tAdvanceMin": null,
					"d011Rate": null,
					"d011RateTop": null,
					"d011RateBottom": null,
					"d012Rate": null,
					"d012RateBottom": null,
					"d0AdvanceJsignType": null,
					"d0AdvanceJsignFee": null,
					"d0AdvanceJsignMin": null,
					"d0AdvanceJsignMax": null,
					"d0AdvanceDsignType": null,
					"d0AdvanceDsignFee": null,
					"d0AdvanceDsignMin": null,
					"d0AdvanceDsignMax": null,
					"codeAdvanceRate": null,
					"codeAdvanceMin": null,
					"remark": ""
				}
			}
		},
		methods: {
			getData() {
				let that = this;
				this.$axios({
					url: '/admin/general/getUserInfo',
					data: {
						userID: this.userid,
						type: 5
					},
					success(res) {
						if (res.data.code == 200) {
							that.mch_id = res.data.content.mch_id; //商户号
							that.intoNo = res.data.content.intoNo; //进件返回单号 用于查询结果
							//详情
							that.form = res.data.content;
						}
					}
				});
			},
			//进件结果提交
			onSubmit() {
				let that = this;
				this.$axios({
					url: '/admin/channel/channelInfo',
					data: {
						userID: this.userid,
						type: 5,
						service_rate: 0,
						direct_data: that.form
					},
					success(res) {
						if (res.data.code == 200) {
							that.$message.success('进件成功！');
						} else {
							that.$message.error(res.data.msg)
						}
					}
				});
			},
			//商户初审
			autoAuditTerm() {
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.newId,
						type: 5,
						genre: 2,
					},
					success(res) {
						if (res.data.code == 200) {
							that.signUrl = res.data.content.signUrl
							that.$message.success(res.data.msg);
						} else {
							that.$message({
								message: res.data.msg,
								type: 'error',
								duration: 0,
								showClose: true,
							});
						}
					}
				});
			},
			//重发签约短信
			sendScanSmsCode() {
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.newId,
						type: 5,
						genre: 5,
					},
					success(res) {
						if (res.data.code == 200) {
							that.signUrl = res.data.content.signUrl
							that.$message.success(res.data.msg);
						} else {
							that.$message({
								message: res.data.msg,
								type: 'error',
								duration: 0,
								showClose: true,
							});
						}
					}
				});
			},
			//商户查询
			queryMerchant() {
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.newId,
						type: 5,
						genre: 3,
					},
					success(res) {
						if (res.data.code == 200) {
							that.$message({
								message: res.data.msg,
								type: 'success',
								duration: 0,
								showClose: true,
							});
						} else {
							that.$message({
								message: res.data.msg,
								type: 'error',
								duration: 0,
								showClose: true,
							});
						}
					}
				});
			},
			//查询微信实名认证申请单状态
			queryAuthenticate() {
				let that =this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.newId,
						type: 5,
						genre: 8,
					},
					success(res) {
						if (res.data.code == 200) {
							// console.log(res.data.content)
							that.qrcodeData = "data:image/png;base64,"+res.data.content.qrcode_data,
							that.$message({
								message: res.data.msg,
								type: 'success',
								duration: 0,
								showClose: true,
							});
						} else {
							that.$message({
								message: res.data.msg,
								type: 'error',
								duration: 0,
								showClose: true,
							});
						}
					}
				});
			},
			//查询微信实名认证授权状态
			authorized(){
				let that =this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.newId,
						mch_id: this.mch_id,
						type: 5,
						genre: 9,
					},
					success(res) {
						if (res.data.code == 200) {
							that.$message({
								message: res.data.msg,
								type: 'success',
								duration: 0,
								showClose: true,
							});
						} else {
							that.$message({
								message: res.data.msg,
								type: 'error',
								duration: 0,
								showClose: true,
							});
						}
					}
				});
			}
		},
		created() {
			this.getData();
			this.newId = Number(this.$route.query.id);
		}

	}
</script>
<style scoped>
	.page {
		background: #FFFFFF;
	}

	.info-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.orderInfo {
		width: 500px;
		height: 500px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F5F5F5;
		line-height: 100px;
	}

	.from-title {
		margin: 40px;
		font-size: 18px;
		font-weight: bold;
	}

	.next-up-img {
		text-align: center;
		margin-top: 50px;
	}

	.top-nav {
		height: 50px;
		display: flex;
	}

	.mch-id {
		line-height: 50px;
		margin-left: 20px;
		width: 400px;
	}

	/* 图片上传样式 */
	.img-nav {
		margin-top: 15px;
	}

	.nav-text-1 {
		font-size: 16px;
		font-weight: bold;
	}

	.nav-text-2 {
		font-size: 10px;
		color: #99A9BF;
		font-weight: 100;
	}

	.nav-text-3 {
		color: #67C23A;
	}

	.nav-radio {
		margin-top: 20px;
		margin-left: 40px;
	}

	.img-box {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.img-box-s {
		margin-left: 100px;
	}

	.img-show {
		width: 220px;
		height: 220px;
		display: flex;
		flex-direction: column;
		/* 	justify-content: center;
	align-items: center; */
	}

	.img-up {
		width: 220px;
		height: 220px;
		/* border: 1px solid #99A9BF; */
	}



	.del-img {
		display: flex;
		justify-content: flex-end;

	}

	.del-img img {
		height: 15px;
		width: 15px;
		border: 1px solid #FFFFFF;
		border-radius: 15px;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #888888;
	}

	.show-img img {
		height: 200px;
		width: 200px;
	}

	/* 上传样式 */

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 220px;
		height: 220px;
		line-height: 220px;
		text-align: center;
	}

	.avatar {
		width: 200px;
		height: 200px;
		display: block;
	}

	.butt {
		text-align: center;
		margin-top: 10px;
	}

	.text-t {
		font-size: 16px;
		color: #888888;
	}
</style>
